import { useColorScheme } from '@mantine/hooks';
import { MantineProvider } from '@mantine/core';
import '@mantine/core/styles.css';
import { QueryClient, QueryClientProvider } from 'react-query';
import { HashRouter, Navigate, Route, Routes } from 'react-router-dom';
import Header from './components/Header/Header';
import AboutPage from './pages/AboutPage';
import NotFoundPage from './pages/NotFoundPage';
import UrvPage from './pages/UrvPage';
import UserPage from './pages/UserPage';
import UsersPage from './pages/UsersPage';

const queryClient = new QueryClient();

export default function App() {

	const colorScheme = useColorScheme(undefined, { getInitialValueInEffect: false });

	return (
		<MantineProvider defaultColorScheme={colorScheme}>
			<QueryClientProvider client={queryClient}>
				<HashRouter>
					<Header />
					<>
						<Routes>
							<Route path="/" element={<Navigate to="/users" />} />

							<Route path="/about" Component={AboutPage} />
							<Route path="/users" Component={UsersPage} />
							<Route path="/users/:userid" Component={UserPage} />
							<Route path="/urv" Component={UrvPage} />

							<Route path="*" Component={NotFoundPage} />
						</Routes>
					</>
				</HashRouter>
			</QueryClientProvider>
		</MantineProvider>
	)
}
